<template>
	<view class="auth">
		<block v-if="status === 'form'">
			<view class="steps">
				<view class="step-item" :class="[{'current-step': step === item.value}, {'active-step': step > item.value}]" v-for="item in steps" :key="item.value" @click="changeStep(item)">
					<view class="title">{{item.label}}</view>
					<view class="sub-title">{{item.text}}</view>
				</view>
			</view>
			
			<auth-form ref="form" v-show="step === 1" :agentId="agentId" @success="status = 'complete'" style="flex: 1;height: 100%;overflow: hidden;"></auth-form>
		</block>
		
		<com-complete v-else :agentId="agentId"></com-complete>
	</view>
</template>

<script>
	import  AuthForm from './components/auth-form.vue';
	import   ComComplete from './components/com-complete.vue';
	
	export default {
		components: { AuthForm, ComComplete },
		data() {
			return {
				steps: [
					{ label: '上传资料', text: '填写信息', value: 1 },
					{ label: '服务商审核通过', text: '开始租赁产品', value: 2 },
				],
				step: 1,
				status: 'form',	//	form: 表单; complete: 完成
				agentId: '', // 服务商id
			};
		},
		onLoad(options) {
			this.agentId = options.agentId
		}
	}
</script>

<style lang="scss" scoped>
	.auth {
		flex: 1;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		
		.steps {
			// position: sticky;
			// top: 0;
			// z-index: 999;
			display: flex;
			align-items: center;
			padding: 52rpx 14rpx;
			justify-content: space-between;
		
			.step-item {
				position: relative;
				flex: 1;
				display: flex;
				align-items: center;
				flex-direction: column;
				padding-top: 32rpx;
		
				&:before {
					position: absolute;
					content: '';
					top: 0;
					width: 16rpx;
					height: 16rpx;
					border-radius: 999px;
					box-sizing: border-box;
					border: 1px solid #DCDCDC;
				}
		
				&::after {
					position: absolute;
					content: '';
					top: 4rpx;
					right: 60%;
					width: 80%;
					height: 1px;
					background-color: #DCDCDC;
				}
		
				&:first-child::after {
					background-color: transparent;
				}
			}
		
			.title {
				font-size: 14px;
				font-weight: 400;
				line-height: 22px;
				text-align: center;
				color: rgba(0, 0, 0, 0.4);
			}
		
			.sub-title {
				padding-top: 8rpx;
				font-size: 24rpx;
				font-weight: 400;
				line-height: 40rpx;
				text-align: center;
				color: rgba(0, 0, 0, 0.4);
			}
		
			.current-step {
				.title {
					color: rgba(124, 123, 152, 1.0);
					font-weight: 600;
				}
		
				&:before {
					box-sizing: border-box;
					border: 1px solid rgba(124, 123, 152, 1.0);
					background-color: rgba(124, 123, 152, 1.0);
				}
		
				&::after {
					position: absolute;
					content: '';
					top: 4rpx;
					right: 60%;
					width: 80%;
					height: 1px;
					background-color: rgba(124, 123, 152, 1.0);
				}
			}
		
			.active-step {
				.title {
					color: rgba(0, 0, 0, 0.9);
				}
		
				&:before {
					box-sizing: border-box;
					border: 1px solid rgba(124, 123, 152, 1.0);
				}
		
				&::after {
					position: absolute;
					content: '';
					top: 4rpx;
					right: 60%;
					width: 80%;
					height: 1px;
					background-color: rgba(124, 123, 152, 1.0);
				}
			}
		
		}
		
	}
</style>
